<template>
  <div class="app-container">
    <ProTable
      :columns.sync="columns"
      :showSearch.sync="showSearch"
      :getList="getList"
      :loading="loading"
      :resetQuery="resetQuery"
      :tableData="tableData"
    >
      <template #pagination>
        <pagination
          v-show="total > 0"
          :total="total"
          :page-sizes="[10, 20, 50, 100, 200, 300, 500]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="xx">
              <el-input :placeholder="$t('xx')" clearable v-model="queryParams.xx" @keyup.enter.native="getList" />
            </el-form-item>

            <el-form-item prop="xx">
              <el-select clearable filterable @change="getList" :placeholder="$t('xx')" v-model="queryParams.xx">
                <el-option :label="$t('是')" value="1" />
                <el-option :label="$t('否')" value="0" />
              </el-select>
            </el-form-item>

            <el-form-item prop="transportAll">
              <el-select clearable filterable @change="getList" v-model="queryParams.xx2" :placeholder="$t('xx')">
                <el-option
                  :label="item.dictLabel"
                  :value="item.dictValue"
                  v-for="item in dict_type_list"
                  :key="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button @click="handleAdd" plain size="mini" type="primary">
          {{ $t('xx') }}
        </el-button>
      </template>
      <template #skuNo="{ row }">
        <div @click="handleEdits(row)" style="cursor: pointer; color: #1890ff">
          {{ row.skuNo }}
        </div>
      </template>
      <template #imgUrl="{ row }">
        <el-image
          fit="contain"
          style="width: 50px; height: 50px"
          :key="Math.random()"
          v-hover="row.imgUrl"
          :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
        />
      </template>
      <template #option="{ row }">
        <el-dropdown @command="(command) => handleCommand(command, row)">
          <span class="el-dropdown-link">
            {{ $t('更多') }}
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-hasPermi="['']" command="handleDetail">
              {{ $t('详情') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </ProTable>

    <!-- sku弹窗 -->
    <Skucontmoduler @relaod="relaod" ref="Skucontmoduler"></Skucontmoduler>

    <!-- 新增/修改 -->
    <!-- <AddAndEdit
      :show.sync="addAndEdit.show"
      :type="addAndEdit.type"
      :formData="addAndEdit.formData"
      @getList="getList"
    /> -->
  </div>
</template>

<script>
import { Loading } from 'element-ui'
// import AddAndEdit from './components/addAndEdit.vue'
export default {
  // components: {AddAndEdit},
  data() {
    return {
      /**@type {ProTableColumns}*/
      columns: [
        {
          label: 'sku编号',
          prop: 'skuNo',
          useSlot: true,
        },
        { label: '库位号', prop: 'spNo' },
        { label: this.$t('图片'), prop: 'imgUrl', width: 110, useSlot: true },
        { label: '操作', prop: 'option', fixed: 'right', useSlot: true },
      ],
      /**字典数据 */
      dict_type_list: [],
      /**显示搜索*/
      showSearch: false,
      /**表格数据 */
      tableData: [],
      /**新增&修改弹窗 */
      addAndEdit: {
        show: false,
        type: '',
        formData: {},
      },
      /**数据总条数 */
      total: 0,
      /**表格加载状态 */
      loading: false,
      /**
       * @type {import('element-ui/types/loading').ElLoadingComponent}
       */
      loadingInstance: null,
      /**查询参数 */
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        xx2: '',
      },
    }
  },
  created() {
    this.getList()
    this.getDictList()
  },
  methods: {
    /**获取字典数据 */
    getDictList() {
      // this.useDict('dict_type').then(({ dict_type }) => (this.dict_type_list = dict_type))
    },
    handleCommand(command, row) {
      this[command](row)
    },

    handleAdd() {
      this.addAndEdit.type = 'add'
      this.addAndEdit.formData = {}
      this.addAndEdit.show = true
    },
    handleEdit(row) {
      this.addAndEdit.type = 'edit'
      this.addAndEdit.formData = { ...row }
      this.addAndEdit.show = true
    },
    handleDelete(row) {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          // api(row.id).then((res) => {
          //   if (res.code == 200) {
          //     this.$message({ type: 'success', message: res.msg })
          //     this.getList()
          //   }
          // })
        })
        .catch((e) => e)
    },
    startLoading() {
      this.loadingInstance = Loading.service({
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
    },
    endLoading() {
      this.loadingInstance?.close()
    },
    relaod() {
      this.getList()
    },
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('packingInformation')
    },
    /** 查询菜单列表 */
    getList() {
      //this.loading = true
      // api(this.queryParams).then((res) => {
      //   this.tableData = res.rows
      //   this.total = res.total
      // }).finally(()=>this.loading=false)
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = null))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
